{% extends "baseUser.html" %}
{% block head %}
	{{ super() }}
    <!-- Custom styles for this template -->
    <link href="static/css/grid.css" rel="stylesheet">
    <link href='/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.css' rel='stylesheet' />
    <link href='/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
{% endblock %}
{% block userData %}
    <div class="container">

      <div class="page-header">
        <h1>Rutina</h1>
        <p class="lead"></p>
      </div>

      <h3>Calendario</h3>
      <p>Selecciona el d&iacute;a para ver el ejercicio que te recomendamos</p>
	
	  <div id='calendar'></div>

    </div> <!-- /container -->
{% endblock %}

{% block js_footer %}
	{{ super() }}

	<script src="/static/fullcalendar-1.6.4/fullcalendar/fullcalendar.js"></script>
	<script>
		$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			editable: true,
			events: [
				{
					title: 'Ejercitar',
					start: new Date(y, m, 1),
					url: 'ejercicio'
				},
				{
					id: 999,
					title: 'Ejercitar',
					start: new Date(y, m, d-3),
					url: 'ejercicio'
				},
				{
					id: 999,
					title: 'Ejercitar',
					start: new Date(y, m, d+4),
					url: 'ejercicio'
				},
				{
					title: 'Ejercitar',
					start: new Date(y, m, d+1),
					url: 'ejercicio'
				}
			]
		});
		
	});
	</script>
	
{% endblock %}
